<template>
  <div class="content">
    <div class="reporting-main">
      <div class="hd">
        <h3 class="delay-title">
          <span>延缓入学申请登记</span>
        </h3>
        <div class="delay-result" v-if="delayResult">
          <div class="result-l">
            【登记号：<span>{{ stuList.projId }}</span> 】
          </div>
          <div class="result-r">
            审核结果：<span
              :class="
                auditColor == '0'
                  ? ''
                  : auditColor == 'Y'
                  ? 'color_success'
                  : 'color_error'
              "
              >{{ auditStatus(stuList.auditStatus) }}</span
            >{{ stuList.auditReason }}
          </div>
        </div>
      </div>
      <div class="bd">
        <van-form @submit="submitForm" class="van-cell-input_right">
          <!-- 学生信息 -->
          <div class="reporting-list module">
            <div class="list-hd">
              <h3 class="title"><i class="icon icon_stu"></i>学生信息</h3>
              <div class="slide" @click="slideModule(1)">
                <span>{{ isSlide1 ? "收起" : "展开" }}</span>
                <!-- <i class="icon" :class="{ 'icon-up': isSlide1 }"></i> -->
                <van-icon
                  class="icon"
                  :name="isSlide1 ? 'arrow-up' : 'arrow-down'"
                />
              </div>
            </div>
            <div class="list-bd" v-if="isSlide1">
              <!-- 学生姓名 -->
              <van-field
                class="padr"
                required
                label="学生姓名"
                v-model.trim="ruleForm.name"
                name="name"
                placeholder="请输入学生姓名"
                :rules="[{ required: true, message: '请输入学生姓名' }]"
              >
              </van-field>
              <!-- 身份证号 -->
              <van-field
                class="padr"
                required
                label="身份证号"
                v-model="ruleForm.idno"
                name="idno"
                placeholder="请输入身份证号"
                :rules="[
                  {
                    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    required: true,
                    message: '请输入正确的证件号码',
                  },
                ]"
                @change="idChange"
                disabled
              >
              </van-field>
              <!-- 出生日期 -->
              <van-field
                required
                label="出生日期"
                v-model="ruleForm.birth"
                name="birth"
                is-link
                placeholder="请选择出生日期"
                @focus="showBirthChoice = true"
                :rules="[{ required: true, message: '请选择出生日期' }]"
                disabled
              >
              </van-field>
              <van-popup
                v-model="showBirthChoice"
                position="bottom"
                :style="{ height: '30%' }"
              >
                <van-datetime-picker
                  v-model="currentDate"
                  type="date"
                  title="选择年月日"
                  @cancel="showBirthChoice = false"
                  @confirm="confirmBirth()"
                />
              </van-popup>
              <!-- 性别 -->
              <van-field
                required
                label="性别"
                v-model="ruleForm.gender"
                name="gender"
                is-link
                placeholder="请选择学生性别"
                @focus="showSexChoice = true"
                :rules="[{ required: true, message: '请选择学生性别' }]"
                disabled
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showSexChoice"
                :round="false"
                :actions="sexes"
                @select="onSelectSex"
              ></van-action-sheet>
              <!-- 登录密码 -->
              <van-field
                required
                label="登录密码"
                right-icon="yanjing"
                v-model="ruleForm.pwd"
                :type="password"
                name="pwd"
                placeholder="密码由6-20位数字和字母组成"
                :rules="[
                  { required: true, message: '请填写密码' },
                  {
                    pattern: /(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$)/,
                    message: '请输入由6-20位数字和字母组成的密码',
                  },
                ]"
              >
                <van-icon
                  class="iconfont iconyanjing"
                  class-prefix="icon"
                  slot="right-icon"
                  name="yanjing"
                  @click="showPwd"
                ></van-icon>
              </van-field>
              <!-- 应入学时间 -->
              <van-field
                required
                label="应入学时间"
                v-model="ruleForm.studyTime"
                name="studyTime"
                is-link
                placeholder="请选择应入学时间"
                disabled
              >
              </van-field>
              <!-- 户籍类型 -->
              <van-field
                required
                readonly
                label="户籍类型"
                v-model="ogType"
                name="ogType"
                is-link
                placeholder="请选择户籍类型"
                @focus="showOgTypeChoice = true"
                :rules="[{ required: true, message: '请选择户籍类型' }]"
              >
              </van-field>
              <van-action-sheet
                v-model="showOgTypeChoice"
                :round="false"
                :actions="ogTypes"
                @select="onSelectOgType"
              ></van-action-sheet>

              <!-- 民族 -->
              <van-field
                required
                label="民族"
                v-model="nation"
                name="nation"
                is-link
                placeholder="请选择民族"
                @focus="showNationChoice = true"
                :rules="[{ required: true, message: '请选择民族' }]"
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showNationChoice"
                :round="false"
                :actions="nations"
                @select="onSelectNation"
                :style="{ height: '50%' }"
              ></van-action-sheet>
              <!-- 手机号 -->
              <van-field
                class="padr"
                required
                label="手机号"
                v-model="ruleForm.phone"
                name="phone"
                placeholder="接收短信使用"
                :rules="[
                  {
                    pattern: /^1[34578]\d{9}$/,
                    required: true,
                    message: '请输入正确的手机号码',
                  },
                ]"
              >
              </van-field>
              <!-- 乡（镇）人民政府审批意见 -->
              <van-field
                class="fle"
                required
                readonly
                label="乡(镇)人民政府审批意见"
                v-model="communityStatus"
                name="communityStatus"
                is-link
                placeholder="请选择"
                @focus="showCommunityStatusChoice = true"
                :rules="[{ required: true, message: '请选择' }]"
              >
              </van-field>
              <van-action-sheet
                v-model="showCommunityStatusChoice"
                :round="false"
                :actions="approvalStatus"
                @select="onSelectComStatus"
              ></van-action-sheet>
              <!-- 县市教育行政部门或州教育局审批意见 -->
              <van-field
                class="fle"
                required
                readonly
                label="县(市)教育行政部门或州教育局审批意见"
                v-model="cityStatus"
                name="cityStatus"
                is-link
                placeholder="请选择"
                @focus="showCityStatueChoice = true"
                :rules="[{ required: true, message: '请选择' }]"
              >
              </van-field>
              <van-action-sheet
                v-model="showCityStatueChoice"
                :round="false"
                :actions="approvalStatus"
                @select="onSelectCityStatus"
              ></van-action-sheet>
              <!-- 户籍地址区县 -->
              <van-field
                class="fle1"
                required
                label="户籍地址区县"
                v-model="regionCode"
                name="regionCode"
                is-link
                placeholder="请选择区县"
                @focus="showRegionCodeChoice = true"
                :rules="[{ required: true, message: '请选择区县' }]"
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showRegionCodeChoice"
                :round="false"
                :actions="liveBlockLists"
                @select="onSelectLiveBlock"
                :style="{ height: '30%' }"
              ></van-action-sheet>
              <!-- 户籍地址街道 -->
              <van-field
                class="fle1"
                required
                label="户籍地址街道"
                v-model="liveStreet"
                name="disableType"
                is-link
                placeholder="请选择街道"
                @focus="onSelectStreet"
                :rules="[{ required: true, message: '请选择街道' }]"
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showLiveStreetChoice"
                :round="false"
                :actions="liveStreets"
                @select="onSelectLiveStreet"
                :style="{ height: '30%' }"
              ></van-action-sheet>

              <!-- 户籍地址小区 -->
              <van-field
                class="fle1"
                required
                label="户籍地址小区"
                v-model="liveCommunity"
                name="liveCommunity"
                is-link
                placeholder="请选择小区"
                @focus="onSelectCommunity"
                :rules="[{ required: true, message: '请选择小区' }]"
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showLiveCommunityChoice"
                :round="false"
                :actions="liveCommunitys"
                @select="onSelectLiveCommunity"
                :style="{ height: '30%' }"
              ></van-action-sheet>
              <!-- 户籍详细地址 -->
              <van-field
                class="wid100 padr"
                required
                label="户籍详细地址"
                v-model.trim="ruleForm.address"
                name="address"
                placeholder="楼栋-单元-房号,1-2-302"
                :rules="[
                  { required: true, message: '请输入详细地址' },
                  {
                    pattern: /(^.{1,100}$)/,
                    message: '输入长度在100以内',
                  },
                ]"
              >
              </van-field>
            </div>
          </div>
          <!-- 监护人信息 -->
          <div class="reporting-list module">
            <div class="list-hd">
              <h3 class="title"><i class="icon icon_par"></i>监护人信息</h3>
              <div class="slide" @click="slideModule(2)">
                <span>{{ isSlide2 ? "收起" : "展开" }}</span>
                <!-- <i class="icon" :class="{ 'icon-up': isSlide1 }"></i> -->
                <van-icon
                  class="icon"
                  :name="isSlide2 ? 'arrow-up' : 'arrow-down'"
                />
              </div>
            </div>
            <div class="list-bd" v-if="isSlide2">
              <!-- 监护人 -->
              <van-field
                class="wid100 padr"
                required
                label="监护人姓名"
                v-model.trim="ruleForm.parName"
                name="parName"
                placeholder="请输入监护人姓名"
                :rules="[
                  { required: true, message: '请输入监护姓名' },
                  {
                    pattern: /(^.{1,100}$)/,
                    message: '输入长度在100以内',
                  },
                ]"
              >
              </van-field>
              <van-field
                class="padr"
                required
                label="身份证号"
                v-model="ruleForm.parIdno"
                name="parIdno"
                placeholder="请输入身份证号"
                :rules="[
                  {
                    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    required: true,
                    message: '请输入正确的身份证号',
                  },
                ]"
              >
              </van-field>
              <van-field
                class="padr"
                required
                label="联系电话"
                v-model="ruleForm.parPhone"
                name="parPhone"
                placeholder="请输入联系电话"
                :rules="[
                  {
                    pattern: /^1[34578]\d{9}$/,
                    required: true,
                    message: '请输入正确的手机号码',
                  },
                ]"
              >
              </van-field>
              <van-field
                required
                label="与学生关系"
                v-model="parRlat"
                name="parRlat"
                is-link
                placeholder="请选择学生关系"
                @focus="showParRlatChoice = true"
                :rules="[{ required: true, message: '请选择学生关系' }]"
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showParRlatChoice"
                :round="false"
                :actions="parRlats"
                @select="onSelectParRlat"
              ></van-action-sheet>
            </div>
          </div>
          <!-- 延缓入学信息 -->
          <div class="reporting-list module">
            <div class="list-hd">
              <h3 class="title">
                <i class="icon icon_toschool"></i>延缓入学信息
              </h3>
              <div class="slide" @click="slideModule(3)">
                <span>{{ isSlide3 ? "收起" : "展开" }}</span>
                <!-- <i class="icon" :class="{ 'icon-up': isSlide1 }"></i> -->
                <van-icon
                  class="icon"
                  :name="isSlide3 ? 'arrow-up' : 'arrow-down'"
                />
              </div>
            </div>
            <div class="list-bd" v-if="isSlide3">
              <!-- 延缓后去向 -->
              <div class="delayinfo-title">延缓后去向</div>
              <van-field
                class="padr"
                style="padding-left: 5px; padding-top: 5px"
                v-model.trim="ruleForm.delayGo"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入延缓后去向"
                show-word-limit
                :rules="[
                  { required: true, message: '请输入延缓后去向' },
                  {
                    pattern: /(^.{1,100}$)/,
                    message: '输入长度在100以内',
                  },
                ]"
              />
              <!-- 延缓原因 -->
              <div class="delayinfo-title">延缓原因</div>
              <van-field
                class="padr"
                style="padding-left: 5px; padding-top: 5px"
                v-model.trim="ruleForm.delayReason"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入延缓原因"
                show-word-limit
                :rules="[
                  { required: true, message: '请输入延缓原因' },
                  {
                    pattern: /(^.{1,100}$)/,
                    message: '输入长度在100以内',
                  },
                ]"
              />
            </div>
          </div>
          <!-- 延缓入学材料 -->
          <div class="reporting-list module">
            <div class="list-hd">
              <h3 class="title">
                <i class="icon icon_hkb"></i>{{ delayImageInfo.imgTitle
                }}<i
                  class="color-red"
                  v-if="delayImageInfo.isRequired == '1'"
                  style="font-weight: normal"
                  >（必填）</i
                >
              </h3>
              <div class="slide" @click="slideModule(4)">
                <span>{{ isSlide4 ? "收起" : "展开" }}</span>
                <!-- <i class="icon" :class="{ 'icon-up': isSlide1 }"></i> -->
                <van-icon
                  class="icon"
                  :name="isSlide4 ? 'arrow-up' : 'arrow-down'"
                />
              </div>
            </div>
            <div class="list-bd" v-if="isSlide4">
              <p class="info">
                {{ delayImageInfo.imgIntro }}，最多
                {{ delayImageInfo.maxNum }} 页
              </p>
              <div class="uploader-box">
                <van-uploader
                  :class="{
                    'limit-uploader': stuList.auditStatus == 'Y',
                  }"
                  v-model="delayImage"
                  multiple
                  :max-count="delayImageInfo.maxNum"
                  :max-size="10 * 1024 * 1024"
                  :before-read="beforeAvatarUpload"
                  :before-delete="handleRemove"
                  @oversize="onOversize"
                  :after-read="
                    (file) => handleHttpRequest(file, delayImageInfo.imgType)
                  "
                />
              </div>
            </div>
          </div>
          <div class="form-btn" v-if="stuList.auditStatus != 'Y'">
            <van-button block type="info" native-type="submit">{{
              delayResult ? "确认修改" : "提交"
            }}</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../utils/formatdate.js";
import { Toast, Dialog } from "vant";
import localDb from "../utils/localDb";
import fetches from "../utils/request";
const { defaultHost } = fetches;

export default {
  data() {
    return {
      stuList: {},
      isSlide1: true, //是否显示学生信息
      isSlide2: false, //是否显示入学信息
      isSlide3: false, //是否显示其他信息
      isSlide4: false, //是否显示监护人信息
      isPwd: true, //是否显示密码
      password: "password", //密码输入框类型
      ruleForm: {
        name: "", //学生姓名
        idno: "", //学生身份证
        birth: "", //出生日期
        gender: "", //性别
        pwd: "", //登录密码
        studyTime: "", //应入学时间
        ogType: "0", //户籍类型
        nation: "", //民族
        phone: "", //手机号码
        regionCode: "", // 户籍区县
        street: "", //户籍街道
        community: "", //户籍小区
        address: "", //户籍详细地址
        parName: "", //监护人1姓名
        parIdno: "", //监护人1身份证号
        parPhone: "", //监护人1联系电话
        parRlat: "", //监护人1生源关系
        delayGo: "", //延缓后去向
        delayReason: "", //延缓原因
        communityStatus: "", //乡（镇)人民政府审批意见
        cityStatus: "", //县市教育行政部门或州教育局审批意见
      },
      showOgTypeChoice: false, //是否显示户籍类型选项
      ogType: "", //当前选中的户籍类型
      ogTypes: [
        //户籍类型列表
        { name: "非农户口", value: "0" },
        { name: "农业户口", value: "1" },
      ],
      showBirthChoice: false, //显示日期选择
      currentDate: new Date(), //当前选中的出生日期
      showSexChoice: false, //显示性别选择
      sexes: [
        //性别列表
        { name: "男" },
        { name: "女" },
      ],
      showNationChoice: false, //是否显示民族选项
      nation: "", //当前选中的民族
      nations: [
        { id: 1, name: "汉族" },
        { id: 2, name: "蒙古族" },
        { id: 3, name: "回族" },
        { id: 4, name: "藏族" },
        { id: 5, name: "维吾尔族" },
        { id: 6, name: "苗族" },
        { id: 7, name: "彝族" },
        { id: 8, name: "壮族" },
        { id: 9, name: "布依族" },
        { id: 10, name: "朝鲜族" },
        { id: 11, name: "满族" },
        { id: 12, name: "侗族" },
        { id: 13, name: "瑶族" },
        { id: 14, name: "白族" },
        { id: 15, name: "土家族" },
        { id: 16, name: "哈尼族" },
        { id: 17, name: "哈萨克族" },
        { id: 18, name: "傣族" },
        { id: 19, name: "黎族" },
        { id: 20, name: "傈僳族" },
        { id: 21, name: "佤族" },
        { id: 22, name: "畲族" },
        { id: 23, name: "高山族" },
        { id: 24, name: "拉祜族" },
        { id: 25, name: "水族" },
        { id: 26, name: "东乡族" },
        { id: 27, name: "纳西族" },
        { id: 28, name: "景颇族" },
        { id: 29, name: "柯尔克孜族" },
        { id: 30, name: "土族" },
        { id: 31, name: "达翰尔族" },
        { id: 32, name: "么佬族" },
        { id: 33, name: "羌族" },
        { id: 34, name: "布朗族" },
        { id: 35, name: "撒拉族" },
        { id: 36, name: "毛南族" },
        { id: 37, name: "仡佬族" },
        { id: 38, name: "锡伯族" },
        { id: 39, name: "阿昌族" },
        { id: 40, name: "普米族" },
        { id: 41, name: "塔吉克族" },
        { id: 42, name: "怒族" },
        { id: 43, name: "乌孜别克族" },
        { id: 44, name: "俄罗斯族" },
        { id: 45, name: "鄂温克族" },
        { id: 46, name: "德昂族" },
        { id: 47, name: "保安族" },
        { id: 48, name: "裕固族" },
        { id: 49, name: "京族" },
        { id: 50, name: "塔塔尔族" },
        { id: 51, name: "独龙族" },
        { id: 52, name: "鄂伦春族" },
        { id: 53, name: "赫哲族" },
        { id: 54, name: "门巴族" },
        { id: 55, name: "珞巴族" },
        { id: 56, name: "基诺族" },
      ], //民族
      showRegionCodeChoice: false, // 是否显示区县列表
      regionCode: "", //当前选中的区县
      liveBlockLists: [], //区县列表
      showLiveStreetChoice: false, //是否显示街道列表
      liveStreet: "", //当前选中的街道
      liveStreets: [], //街道列表
      showLiveCommunityChoice: false, //是否显示小区列表
      liveCommunity: "", //当前选中的小区
      liveCommunitys: [], //小区列表
      showParRlatChoice: false, //是否显示生源关系列表
      parRlat: "", //当前选中的生源关系
      parRlats: [
        //生源关系列表列表
        { name: "父子（父女）", value: "1" },
        { name: "母子（母女）", value: "2" },
        { name: "祖孙", value: "3" },
        { name: "领养", value: "4" },
        { name: "其他", value: "5" },
      ],
      showCommunityStatusChoice: false, //
      communityStatus: "",
      showCityStatueChoice: false, //是否显示
      cityStatus: "",
      approvalStatus: [
        { name: "未审批", value: "0" },
        { name: "同意", value: "Y" },
        { name: "不同意", value: "N" },
      ],
      delayImage: [], //延缓入学图片列表
      delayImageInfo: {},
      auditColor: "",
      delayResult: false, //是否显示审核结果
    };
  },
  methods: {
    // 审核结果
    auditStatus(type) {
      switch (type) {
        case "0":
          return "审核中...";
          break;
        case "Y":
          return "审核已通过";
          break;
        case "N":
          return "审核未通过";
          break;
        default:
          break;
      }
    },
    //展开收起
    slideModule(val) {
      if (val == 1) {
        this.isSlide1 = !this.isSlide1;
        if (this.isSlide1 == true) {
          this.isSlide2 = false;
          this.isSlide3 = false;
          this.isSlide4 = false;
        }
      } else if (val == 2) {
        this.isSlide2 = !this.isSlide2;
        if (this.isSlide2 == true) {
          this.isSlide1 = false;
          this.isSlide3 = false;
          this.isSlide4 = false;
        }
      } else if (val == 3) {
        this.isSlide3 = !this.isSlide3;
        if (this.isSlide3 == true) {
          this.isSlide1 = false;
          this.isSlide2 = false;
          this.isSlide4 = false;
        }
      } else if (val == 4) {
        this.isSlide4 = !this.isSlide4;
        if (this.isSlide4 == true) {
          this.isSlide1 = false;
          this.isSlide2 = false;
          this.isSlide3 = false;
        }
      }
    },
    //是否显示密码
    showPwd() {
      this.isPwd = !this.isPwd;
      if (this.isPwd) {
        this.password = "password";
      } else {
        this.password = "text";
      }
    },
    //选择户籍类型
    onSelectOgType(item) {
      this.ruleForm.ogType = item.name;
      this.ogType = item.name;
      this.showOgTypeChoice = false;
    },
    //选择出生年月
    confirmBirth() {
      this.ruleForm.birth = formatDate(
        new Date(this.currentDate).valueOf(),
        "Y-M-D"
      );
      this.showBirthChoice = false;
    },
    //回填出生年月和性别
    idChange() {
      if (this.stuList.regType != "reg10" && this.stuList.ogState != "0") {
        this.ruleForm.gender = this.formatId(this.ruleForm.idno, 2);
        this.ruleForm.birth = this.formatId(this.ruleForm.idno, 1);
      }
    },
    //解析身份证号码中的出生年月和性别
    formatId(card, num) {
      return getAnalysisIdCard(card, num);
    },
    //选择性别
    onSelectSex(item) {
      this.ruleForm.gender = item.name;
      this.showSexChoice = false;
    },
    //选择民族
    onSelectNation(item) {
      this.ruleForm.nation = item.name;
      this.nation = item.name;
      this.showNationChoice = false;
    },
    // 选择区县
    onSelectLiveBlock(item) {
      // console.log(item);
      this.ruleForm.regionCode = item.regionCode;
      this.regionCode = item.name;
      this.showRegionCodeChoice = false;
      //获取当前居住区县下的街道 / 意向学校
      this.$fetch(
        "/api/Student/GetStreetByBlock",
        { blockCode: item.regionCode },
        "get"
      ).then((data) => {
        if (data.res == 0) {
          // console.log(data);
          let streetLists = data.data;
          this.liveStreets = JSON.parse(
            JSON.stringify(streetLists).replace(/regionName/g, "name")
          );
          this.liveStreet = "";
          this.ruleForm.street = "";
          this.liveCommunity = "";
          this.ruleForm.community = "";
          this.ruleForm.address = "";
        } else {
          this.$toast(data.msg);
        }
      });
      this.$fetch(
        "/api/Student/GetSchoolByBlock",
        { blockCode: item.regionCode },
        "get"
      ).then((data) => {
        // console.log(data);
        if (data.res == 0) {
          let wishSchoolList = data.data;
          this.wishSchools = JSON.parse(
            JSON.stringify(wishSchoolList).replace(/schoolName/g, "name")
          );
        } else {
          this.$toast(data.msg);
        }
      });
    },
    //选择街道前判断
    onSelectStreet() {
      if (!this.regionCode) {
        this.$toast("请先选择区县");
        return false;
      }
      this.showLiveStreetChoice = true;
    },
    //选择街道
    onSelectLiveStreet(item) {
      this.ruleForm.street = item.regionCode;
      this.liveStreet = item.name;
      this.showLiveStreetChoice = false;
      //获取当前居住地街道下的小区
      this.$fetch(
        "/api/Student/GetCommunityByStreet",
        { streetCode: item.regionCode },
        "get"
      ).then((data) => {
        // console.log(data);
        if (data.res == 0) {
          let communityLists = data.data;
          this.liveCommunitys = JSON.parse(
            JSON.stringify(communityLists).replace(/regionName/g, "name")
          );
          this.liveCommunity = "";
          this.ruleForm.community = "";
          this.ruleForm.address = "";
        } else {
          this.$toast(data.msg);
        }
      });
    },
    // 选择小区前判断
    onSelectCommunity() {
      if (!this.regionCode) {
        this.$toast("请先选择区县");
        return false;
      }
      if (!this.liveStreet) {
        this.$toast("请先选择街道");
        return false;
      }
      this.showLiveCommunityChoice = true;
    },
    //选择小区
    onSelectLiveCommunity(item) {
      this.ruleForm.community = item.regionCode;
      this.liveCommunity = item.name;
      this.showLiveCommunityChoice = false;
    },
    //选择生源关系
    onSelectParRlat(item) {
      this.ruleForm.parRlat = item.name;
      this.parRlat = item.name;
      this.showParRlatChoice = false;
    },
    // 乡（镇）人民政府审批意见
    onSelectComStatus(item) {
      this.communityStatus = item.name;
      this.ruleForm.communityStatus = item.value;
      this.showCommunityStatusChoice = false;
    },
    // 县市教育行政部门或州教育局审批意见
    onSelectCityStatus(item) {
      this.cityStatus = item.name;
      this.ruleForm.cityStatus = item.value;
      this.showCityStatueChoice = false;
    },
    //图片格式限制
    beforeAvatarUpload(file) {
      let isJPG = null;
      if (file.length > 1) {
        for (let j = 0; j < file.length; j++) {
          if (
            file[j].type === "image/jpeg" ||
            file[j].type === "image/jpg" ||
            file[j].type === "image/png"
          ) {
            isJPG =
              file[j].type === "image/jpeg" ||
              file[j].type === "image/jpg" ||
              file[j].type === "image/png";
          } else {
            isJPG = false;
            return;
          }
        }
      } else {
        isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/jpg" ||
          file.type === "image/png";
      }
      file.deg = 0;
      if (!isJPG) {
        Toast("上传图片只能是 JPG或PNG 格式!");
      }
      return isJPG;
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file);
      Dialog.confirm({
        title: "提示",
        message: "确定删除这张图片吗?",
      })
        .then(() => {
          this.$fetch(
            `/api/Student/DelUploadImage?id=${file.id}`,
            {},
            "post"
          ).then((data) => {
            if (data.res == 0) {
              Toast.success({
                message: "删除成功",
                duration: 1000,
              });
              //this.reload();
              this.getDelayImageInfo();
            } else {
              this.$toast(data.msg);
            }
          });
        })
        .catch(() => {
          this.$toast("已取消删除");
        });
    },
    //图片大小限制
    onOversize(file) {
      //const isLt3M = file.size / 1024 / 1024 < 3;
      //if (!isLt3M) {
      Toast("上传图片大小不能超过 10MB!");
      //}
      //return isLt3M;
    },
    //上传图片
    handleHttpRequest(file, imgType) {
      let formData = new FormData();
      if (file instanceof Array && file.length) {
        // 判断是否是多图上传 多图则循环添加进去
        file.forEach((item) => {
          formData.append("file", item.file); //第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
        });
      } else {
        formData.append("file", file.file);
      }
      formData.append("imagetype", imgType);
      localDb.set("upload", "upload");
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      this.$fetch(
        `/api/Student/UploadDelayImage?imageType=${imgType}`,
        formData,
        "post"
      )
        .then((data) => {
          if (data.res == 0) {
            Toast.clear();
            Toast.success({
              message: "上传成功",
              duration: 1000,
            });
            localDb.clear("1", "upload");
            //this.reload();
            this.getDelayImageInfo();
          } else {
            localDb.clear("1", "upload");
            this.$toast(data.msg);
          }
        })
        .catch(() => {
          this.getPhotoList();
          Toast.fail("上传失败");
        });
    },
    //获取学生信息数据
    getStuList() {
      this.$fetch("/api/Student/GetStudDelayInfo", "get").then((data) => {
        if (data.res == 0) {
          // console.log(data);
          this.$store.dispatch("setStuList", data.data.personDelay);
          this.stuList = data.data.personDelay;
          this.auditColor = this.stuList.auditStatus;
          // this.ruleForm = this.stuList;
          this.ruleForm.name = this.stuList.name;
          this.ruleForm.idno = this.stuList.idno;
          this.ruleForm.birth = new Date(this.stuList.birth);
          this.ruleForm.gender = this.stuList.gender;
          this.ruleForm.pwd = this.stuList.pwd;
          this.ruleForm.nation = this.stuList.nation || "";
          this.ruleForm.phone = this.stuList.phone;
          this.ruleForm.regionCode = this.stuList.regionCode || "";
          this.ruleForm.street = this.stuList.street || "";
          this.ruleForm.community = this.stuList.community || "";
          this.ruleForm.address = this.stuList.address || "";
          this.ruleForm.parName = this.stuList.parName || "";
          this.ruleForm.parIdno = this.stuList.parIdno || "";
          this.ruleForm.parPhone = this.stuList.parPhone || "";
          this.ruleForm.parRlat = this.stuList.parRlat || "";
          this.ruleForm.delayGo = this.stuList.delayGo;
          this.ruleForm.delayReason = this.stuList.delayReason;
          const newDate = new Date();
          this.ruleForm.studyTime = newDate.getFullYear() + "-09-01";
          this.ruleForm.birth = formatDate(
            new Date(this.stuList.birth).valueOf(),
            "Y-M-D"
          );

          // 设置区县
          let blockLists = data.data.regionBlockList;
          this.liveBlockLists = JSON.parse(
            JSON.stringify(blockLists).replace(/regionName/g, "name")
          );
          // 回填区县
          if (this.stuList.regionCode) {
            this.liveBlockLists.forEach((item) => {
              if (item.regionCode == this.stuList.regionCode) {
                this.regionCode = item.name;
              }
            });
            // 回填街道
            if (this.stuList.street) {
              this.$fetch(
                "/api/Student/GetStreetByBlock",
                { blockCode: this.stuList.regionCode },
                "get"
              ).then((data) => {
                if (data.res == 0) {
                  // console.log(data);
                  let streetLists = data.data;
                  this.liveStreets = JSON.parse(
                    JSON.stringify(streetLists).replace(/regionName/g, "name")
                  );
                  this.liveStreets.forEach((item) => {
                    if (item.regionCode == this.stuList.street) {
                      this.liveStreet = item.name;
                    }
                  });
                } else {
                  this.$toast(data.msg);
                }
              });
              // 回填小区
              if (this.stuList.community) {
                this.$fetch(
                  "/api/Student/GetCommunityByStreet",
                  { streetCode: this.stuList.street },
                  "get"
                ).then((data) => {
                  if (data.res == 0) {
                    let communityLists = data.data;
                    this.liveCommunitys = JSON.parse(
                      JSON.stringify(communityLists).replace(
                        /regionName/g,
                        "name"
                      )
                    );
                    this.liveCommunitys.forEach((item) => {
                      if (item.regionCode == this.stuList.community) {
                        this.liveCommunity = item.name;
                      }
                    });
                  } else {
                    this.$toast(data.msg);
                  }
                });
              }
            }
          }
          this.nation = this.stuList.nation;
          this.ogType = this.stuList.ogType;
          // this.ogTypes.forEach(item => {
          //   if (item.value == this.stuList.ogType) {
          //     this.ogType = item.name;
          //   }
          // });
          this.parRlat = this.stuList.parRlat;
          this.approvalStatus.forEach((item) => {
            if (item.value == this.stuList.communityStatus) {
              this.communityStatus = item.name;
              this.ruleForm.communityStatus = item.value;
            }
            if (item.value == this.stuList.cityStatus) {
              this.cityStatus = item.name;
              this.ruleForm.cityStatus = item.value;
            }
          });
          if (
            this.stuList.delayGo &&
            this.stuList.delayReason &&
            this.stuList.communityStatus
          ) {
            this.delayResult = true;
          }
        }
      });
    },
    // 获取延缓入学图片信息
    getDelayImageInfo() {
      this.$fetch("/api/Student/GetStudDelayImage", "get").then((data) => {
        if (data.res == 0) {
          this.delayImageInfo = data.data[0];
          this.delayImage = this.delayImageInfo.regImages;

          this.delayImageInfo.regImages.forEach((item) => {
            item.url = defaultHost + item.imgUrl;
          });
        }
      });
    },
    submitForm() {
      if (!this.ruleForm.parIdno) {
        this.$toast("请填写监护人信息");
        return false;
      }
      if (this.ruleForm.communityStatus != "Y") {
        if (this.ruleForm.cityStatus != "Y") {
          this.$toast(
            "请先取得乡(镇)人民政府同意或者县市教育局行政部门或州教育局同意"
          );
          return false;
        }
      }
      if (!this.delayImage.length) {
        this.$toast("请上传延缓入学材料");
        return false;
      }
      let params = this.ruleForm;
      console.log(params);
      this.$fetch("/api/Student/SubmitStudDelayInfo", params, "post")
        .then((data) => {
          if (data.res == 0) {
            // console.log(data);
            document.documentElement.scrollTop = "0px";
            // this.delayApplyResult = true;
            // 确认修改重置审核状态
            if (this.delayResult) {
              const auditStatus = "0";
              this.$fetch(
                `/api/Student/UpdatePersonDelay?auditStatus=${auditStatus}`,
                {},
                "post"
              ).then((data) => {
                if (data.res == 0) {
                  console.log(data);
                }
              });
              Toast.success({
                message: "保存成功",
                duration: 1500,
              });
            }
            // this.getStuList();
            location.reload();
            this.$store.dispatch("setUser", this.ruleForm.name);
          } else {
            this.$toast(data.msg);
          }
        })
        .catch((error) => {
          this.$toast(error.response.data.msg);
        });
    },
  },
  mounted() {
    this.getStuList();
    this.getDelayImageInfo();
  },
};
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #f9f9f9;
}
.reporting-main {
  .bd {
    overflow: hidden;
  }
  .iconfont {
    font-size: 38px;
  }
  .bd {
    padding: 20px 10px 0;
  }
  .uploader-box {
    padding: 20px 0;
    text-align: left;
  }
  .wid100 {
    /deep/ .van-field__label {
      width: 220px;
    }
  }
  .wid7 {
    /deep/ .van-field__value {
      .van-radio__label {
        margin-left: 14px;
      }
    }
    /deep/ .van-radio__icon {
      .van-icon {
        line-height: 1.15;
      }
    }
  }
  .padr {
    padding-right: 40px !important;
  }
  .fle {
    /deep/ .van-cell__title {
      flex: 2;
    }
  }
  .fle1 {
    /deep/ .van-cell__title {
      flex: 1;
    }
  }
  .delayinfo-title {
    font-size: 32px;
    color: #666666;
    text-align: left;
    line-height: 42px;
    padding-left: 10px;
    margin-top: 20px;
  }
  .van-field__control {
    color: #222;
  }
  .form-btn {
    width: 105%;
    margin-left: -10px;
    .van-button {
      height: 90px;
      font-size: 36px;
    }
  }
}
.delay-title {
  height: 80px;
  line-height: 80px;
  font-size: 36px;
  text-align: center;
  color: #fff;
  background: url(../assets/images/bg-xiugai.png);
  span {
    position: relative;
    // display: inline-block;
    &::before {
      position: absolute;
      top: 10px;
      left: -40px;
      content: "";
      width: 28px;
      height: 28px;
      background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
    }
    &::after {
      position: absolute;
      top: 10px;
      right: -40px;
      content: "";
      width: 28px;
      height: 28px;
      background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
    }
  }
}
.delay-result {
  height: 105px;
  background-color: #fff;
  border-top: 4px solid #0195ff;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  margin: 30px 10px 0;
  padding: 0 30px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .result-l {
    font-size: 32px;
    color: #222;
  }
  .result-r {
    font-size: 32px;
    color: #222;
    .color_success {
      color: #3fa264;
    }
    .color_error {
      color: #ff0000;
    }
  }
}
.van-uploader {
  &.limit-uploader {
    /deep/ .van-uploader__upload {
      display: none;
    }
  }
}
</style>
<style lang="scss">
.uploader-box {
  width: 105%;
  .van-uploader__preview-image {
    width: 210px;
    height: 210px;
  }
  .van-uploader__preview {
    margin: 0 20px 30px 0;
  }
  .van-uploader__upload {
    width: 210px;
    height: 210px;
    margin: 0 0 30px 0;
  }
}
</style>
